<template>
    <div>
        <a-select v-model="provinces" style="width: 150px;margin-right: 10px;" labelInValue @change="handleProvinceChange">
            <a-select-option v-for="(item,index) in provinceData" :key="index" :value="item['value']" >
                {{ item['label'] }}
            </a-select-option>
        </a-select>
        <a-select v-model="cities" style="width: 150px;margin-right: 10px;" @change="handleCityChange" labelInValue placeholder="城市">
            <a-select-option v-for="(item,index)  in cityData" :key="index" :value="item['value']">
                {{ item['label'] }}
            </a-select-option>
        </a-select>
        <a-select  v-model="areas" style="width: 150px;" @change="handleAreaChange" labelInValue placeholder="区域">
            <a-select-option v-for="(item,index)  in areaData" :key="index" :value="item['value']">
                {{ item['label'] }}
            </a-select-option>
        </a-select>
    </div>
</template>


<script>
    import { forEachData } from '../../utils/areaData'
    export default {
        name : 'SelectAddress',
        props:{
            areaOption:{
                type:Object,
                default: {},
            },
        },
        data() {
            const provinceData = forEachData();
            let cityData = [];
            if(provinceData[0]){
                cityData = forEachData(provinceData[0]['value']);
            }
            let areaData = [];
            if(cityData[0]){
                areaData = forEachData(cityData[0]['value']);
            }
            return {
                provinceData,
                cityData,
                areaData,

                provinces : { key : '' , label : '' },
                cities : { key : '' , label : '' },
                areas : { key : '' , label : '' },

                form : {
                    provinceCode : '',
                    province : '',
                    cityCode : '',
                    city : '',
                    areaCode : '',
                    area : '',
                }
            }
        },
        mounted() {
            let opt = this.areaOption;
            if(opt){
                if(opt.provinceCode){
                    this.provinces['key'] = opt.provinceCode || '';
                    this.cityData = forEachData(opt.provinceCode);
                }
                if(opt.province){
                    this.provinces['label'] = opt.province || '';
                }
                if(opt.cityCode){
                    this.cities['key'] = opt.cityCode || '';
                    this.areaData = forEachData(opt.cityCode);
                }
                if(opt.city){
                    this.cities['label'] = opt.city || '';
                }
                if(opt.areaCode){
                    this.areas['key'] = opt.areaCode || '';
                }
                if(opt.area){
                    this.areas['label'] = opt.area || '';
                }
            }
        },
        methods: {
            handleProvinceChange(result) {
                this.provinces = result;
                this.form.provinceCode = result['key'];
                this.form.province = result['label'].trim();
                this.form.cityCode = '';
                this.form.areaCode = '';
                this.form.city = '';
                this.form.area = '';

                this.cityData = forEachData(result['key']);
                if(this.cityData[0]){
                    this.areaData = forEachData(this.cityData[0]['key']);
                }
                this.changeData();
            },
            handleCityChange(result) {
                this.cities = result;
                this.areas = '';

                this.form.cityCode = result['key'];
                this.form.city = result['label'].trim();
                this.form.areaCode = '';
                this.form.area = '';

                this.areaData = forEachData(result['key']);
                this.changeData();
            },
            handleAreaChange(result) {
                this.areas = result;
                this.form.areaCode = result['key'];
                this.form.area = result['label'].trim();
                this.changeData();
            },
            changeData : function() {
                this.$emit('change',this.form)
            }
        },
    }
</script>

<style scoped>
    .components-input-demo-presuffix .anticon-close-circle {
        cursor: pointer;
        color: #ccc;
        transition: color 0.3s;
        font-size: 12px;
    }

    .components-input-demo-presuffix .anticon-close-circle:hover {
        color: #f5222d;
    }

    .components-input-demo-presuffix .anticon-close-circle:active {
        color: #666;
    }
</style>
